<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar :title="$route.name" left-arrow @click-left="$router.back()"/>
    <!-- 侧边栏导航 -->
    <div class="cateInfo">
      <van-sidebar @change="changeBar" v-model="activeKey">
        <van-sidebar-item v-for="item in catelist" :key="item.id" :title="item.catename"/>
      </van-sidebar>
      <van-grid :border="false" :column-num="3">
        <van-grid-item :to="'/list?id='+item.id" v-for="item in secondCate" :key="item.id">
          <van-image :src="item.img"/>
          <p>{{item.catename}}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCate } from "../request/api";
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
      secondCate: []
    };
  },
  mounted() {
    //调取分类接口
    getCate().then(res => {
      console.log(res, "分类列表");
      if (res.code == 200) {
        this.catelist = res.list;
        this.secondCate = res.list[0].children;
      }
    });
  },
  methods: {
    //切换
    changeBar() {
      //重新给二级分类赋值
      this.secondCate = this.catelist[this.activeKey].children;
    }
  }
};
</script>

<style scoped>
.van-sidebar {
  float: left;
}
.van-nav-bar{
  background: red;
  height: 50px;;
}
</style>
